import React, { Component } from 'react'
import qs from 'qs'
import _ from 'lodash'
import moment from 'moment'
import { connect } from 'react-redux'
import cs from 'classnames'

import {
  Icon,
  Button
} from 'antd'
// import Content from 'component/content'
import Layout from 'component/layout'
import Banner from 'component/banner'
import HeaderLayout from 'layout/header'

import { getPreselect, getLockHouse, inputUserInfo } from 'model/user'
import { inputBuildingInfo, getBuilding } from 'model/building'
import { getHouse, switchChoiceHouseType } from 'model/house'

import { timeFormat, formatDuring, calcTime } from 'config/time'

import { sendMessageToNative } from 'utils/sendMessageToNative'

import style from './index.less'

const {
  Content,
  Footer
} = Layout

@connect(state => ({
  user: state.user,
  building: state.building
}), {
  inputUserInfo,
  inputBuildingInfo,
  getPreselect,
  getLockHouse,
  getBuilding,
  getHouse,
  switchChoiceHouseType
})
export default class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      msg: '',
      propertyId: props.building.propertyId,
      housePreiodId: props.building.housePreiodId,
      phone: props.user.phone,
    }

    this.timer = null
  }

  componentDidMount () {
    if (!this.state.msg) {
      this.timer = setInterval(() => this.forceUpdate(), 1000)
    }
  }

  componentWillUnmount () {
    clearTimeout(this.timer)
    this.timer = null
  }

  handleEntrance = async (isPreSelect, isHobSpecific, isHobSpecificTimeout, e) => {
    let type

    if (isPreSelect) {
      type = 0
    } else if (isHobSpecific || isHobSpecificTimeout) {
      // 超时也可以直接进入选房
      type = 1
    }

    if (_.isNil(type)) return

    this.props.switchChoiceHouseType(type)

    this.props.history.push('/house')
  }

  render () {
    const {
      user: {
        loading: userLoading,
        msg: userMsg
      },
      building: {
        loading,
        init,
        msg,

        propertyName,
        backup1,

        preSelectDate,
        preSelectEndDate,
        hobSpecificTime,
        hobSpecificEndTime,
      }
    } = this.props

    const {
      canPreSelect,
      canHobSpecific,
      isPreSelect,
      isPreSelectTimeout,
      isHobSpecific,
      isHobSpecificTimeout,

      startDiffPreSelect,
      endDiffPreSelect,
      startDiffHobSpecific,
      endDiffHobSpecific,

      mPreSelectDate,
      mPreSelectEndDate,
      mHobSpecificTime,
      mHobSpecificEndTime,
    // } = calcTime(preSelectDate, preSelectEndDate, hobSpecificTime, hobSpecificEndTime)
    } = calcTime(preSelectDate, preSelectEndDate, hobSpecificTime, hobSpecificEndTime)

    const displayMsg = (
      loading ?
        '' :
        this.state.msg || msg
    )

    return (
      <HeaderLayout
        title = { propertyName }
        msg = { displayMsg ? <span onClick = { this.initData }>{ displayMsg } <a>重试</a></span> : null }
        onBack = { () => this.props.history.push('/') }
        bottomContent = {
          <Entrance
            loading = { loading }

            canPreSelect = { canPreSelect }
            canHobSpecific = { canHobSpecific }
            isHobSpecific = { isHobSpecific }
            isPreSelect = { isPreSelect }
            isPreSelectTimeout = { isPreSelectTimeout }
            isHobSpecificTimeout = { isHobSpecificTimeout }

            onEntrance = { this.handleEntrance }
            disabled = {
              this.state.msg ||
              loading ||
              msg ||
              !isPreSelect &&
              !isHobSpecific
            }
          />
        }

        fixed

        grey
      >
        <Banner
          mPreSelectEndDate = { mPreSelectEndDate }
          mHobSpecificTime = { mHobSpecificTime }

          startDiffPreSelect = { startDiffPreSelect }
          endDiffPreSelect = { endDiffPreSelect }
          startDiffHobSpecific = { startDiffHobSpecific }
          endDiffHobSpecific = { endDiffHobSpecific }
        />
        <Box title = '选房时间'>
          <Step
            loading = { !init || loading }

            canPreSelect = { canPreSelect }
            canHobSpecific = { canHobSpecific }
            isHobSpecific = { isHobSpecific }
            isPreSelect = { isPreSelect }
            isPreSelectTimeout = { isPreSelectTimeout }
            isHobSpecificTimeout = { isHobSpecificTimeout }

            mPreSelectDate = { mPreSelectDate }
            mPreSelectEndDate = { mPreSelectEndDate }
            mHobSpecificTime = { mHobSpecificTime }
            mHobSpecificEndTime = { mHobSpecificEndTime }
          />
        </Box>
        {
          backup1 ?
            <Box title = '选房须知'>
              <Article>
                <div dangerouslySetInnerHTML = { { __html: backup1 } }></div>
              </Article>
            </Box> :
            null
        }
      </HeaderLayout>
    )
  }
}

const Box = props => {
  return (
    <div className = { style['box'] }>
      <div className = { style['box-header'] }>{ props.title }</div>
      <div className = { style['box-body'] }>
        { props.children }
      </div>
    </div>
  )
}

const Step = props => {
  const {
    loading,

    canPreSelect,
    canHobSpecific,
    isHobSpecific,
    isPreSelect,
    isPreSelectTimeout,
    isHobSpecificTimeout,

    mPreSelectDate,
    mPreSelectEndDate,
    mHobSpecificTime,
    mHobSpecificEndTime,
  } = props

  let $pre = null
  let $hob = null

  if (mPreSelectDate.isValid()) {
    $pre = (
      <ul>
        <li>
          <div className = { style['step-legend'] }>起</div>
          <div className = { style['step-date'] }>{ mPreSelectDate.format(timeFormat()) }</div>
        </li>
        <li className = { style['step-spacer'] }>
          <div className = { style['step-tip'] }><span>备选时段</span></div>
        </li>
        <li>
          <div className = { style['step-legend'] }>止</div>
          <div className = { style['step-date'] }>
            {
              mPreSelectEndDate.isValid() ?
                mPreSelectEndDate.format(timeFormat()) :
                '待定'
            }
          </div>
        </li>
      </ul>
    )
  }

  $hob = (
    <ul>
      <li>
        <div className = { style['step-legend'] }>起</div>
        <div className = { style['step-date'] }>
          {
            mHobSpecificTime.isValid() ?
              mHobSpecificTime.format(timeFormat()) :
              '待定'
          }
        </div>
      </li>
      <li className = { style['step-spacer'] }>
        <div className = { style['step-tip'] }><span>开盘时段</span></div>
      </li>
      <li>
        <div className = { style['step-legend'] }>止</div>
        <div className = { style['step-date'] }>
          {
            mHobSpecificEndTime.isValid() ?
              mHobSpecificEndTime.format(timeFormat()) :
              '待定'
          }
        </div>
      </li>
    </ul>
  )

  const styleString = cs(style['step'], {
    [style['step-merge']]: mPreSelectEndDate.isSame(mHobSpecificTime)
  })

  return (
    <div className = { styleString }>
      { $pre }
      { $hob }
    </div>
  )
}

const Article = props => (
  <div className = { style['article'] }>{ props.children }</div>
)

const Entrance = props => {
  const {
    canPreSelect,
    canHobSpecific,
    isPreSelect,
    isHobSpecific,
    isPreSelectTimeout,
    isHobSpecificTimeout,

    onEntrance,

    ...rest
  } = props

  let buttonString = '进入选房'

  if (isPreSelect) {
    buttonString = '进入备选'
  } else if (isHobSpecific) {
    buttonString = '进入选房'
  }

  return (
    <div className = { style['entrance'] }>
      <Button
        type = 'primary'
        className = { style['entrance-action'] }
        onClick = { e => onEntrance(isPreSelect, isHobSpecific, isHobSpecificTimeout, e) }

        { ...rest }
      >
        { buttonString }
      </Button>
    </div>
  )
}


// {
//   _.isString(backup1) ?
//     backup1.replace('<br>', '<br/>').split('<br/>').map((v, i) => (
//       <p key = { i }>{ v }</p>
//     )) :
//     backup1
// }
